<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transition过渡</title>
    <style>
        .red{
            width:100px;
            height: 100px;
            background-color: red;
            /* CSS属性名称： 指定 +  多于1个及以上   =>  all 
               CSS动画运动的曲线  transition-timing-function: ;
               +  ease  匀速曲线
               +  ease-in
               +  ease-out
               +  ease-in-out
               +  linear     线性曲线
               +  贝塞尔曲线

               技巧: 控制台F12/ 鼠标右建 - 检查   esc  可以调取  aninmations面板   - 专门用来调式动画

             */
            /* transition:all 1s ease 2s; */

            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: cubic-bezier(.17,.67,.75,.1);
            
        }
        .red:hover{
            /* transition 补间动画 - 缓冲 过渡 */
            width: 500px;
            background-color: green;
        }
    </style>
</head>

<body>
   <div class="red"></div>

</body>

</html>